<template>
  <a-modal v-model:open="open" :title="title" :confirm-loading="loading" @ok="submit" @cancel="cancel">
    <a-form :label-col="{ sm: 4 }" ref="formRef" :model="form">
      <a-form-item label="仓库名称" name="warehouse_id" required>
        <a-input :value="currentWarehouse.warehouse_name" readonly disabled />
      </a-form-item>
      <a-form-item label="排码" name="row_num" required>
        <a-input v-model:value="form.row_num" placeholder="排码" />
      </a-form-item>
      <a-form-item label="列码" name="column_num" required>
        <a-input-number v-model:value="form.column_num" placeholder="列码" :min="1" :precision="0" />
      </a-form-item>
      <a-form-item label="层码" name="floor_num">
        <a-input-number v-model:value="form.floor_num" placeholder="层码" :min="1" :precision="0" />
      </a-form-item>
      <a-form-item label="库位编码" name="code" required>
        <a-input :value="code" readonly disabled placeholder="层码"></a-input>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input v-model:value="form.remark" placeholder="备注"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import _ from 'lodash'
import eventEmitter from '@/lib/event-emitter'
import { message } from 'ant-design-vue'
import { locationApi } from '@/api/business/storage/warehouse-api'
import customEventName from '@/views/business/storage/warehouse/warehouse/warehouse-event-name'
const open = ref(false)
const loading = ref(false)
const title = ref('新增仓库')
interface CurrentWarehouse {
  warehouse_name: string
  warehouse_id: number | undefined
  warehouse_code: string
}
const currentWarehouse = ref<CurrentWarehouse>({
  warehouse_name: '',
  warehouse_id: undefined,
  warehouse_code: ''
})

interface LocationFormParams {
  id?: number
  warehouse_id: number | undefined
  column_num: string | undefined
  floor_num: string | undefined
  row_num: string | undefined
  code: string
  remark?: string
}
interface LocationFormModalProps {
  title: string
  data: CurrentWarehouse & LocationFormParams
}
eventEmitter.on(customEventName.LocationFormModal, ({ title: propsTitle, data }: LocationFormModalProps) => {
  title.value = propsTitle
  form.value = _.cloneDeep(defaultForm)
  currentWarehouse.value = {
    warehouse_name: data.warehouse_name,
    warehouse_id: data.warehouse_id,
    warehouse_code: data.warehouse_code
  }
  if (data.id) {
    form.value = {
      id: data.id,
      warehouse_id: data.warehouse_id,
      column_num: data.column_num,
      floor_num: data.floor_num,
      row_num: data.row_num,
      code: data.code,
      remark: data.remark
    }
  }
  open.value = true
})
// 提交
const defaultForm = {
  warehouse_id: undefined,
  column_num: '',
  floor_num: '',
  row_num: '',
  code: ''
}
const form = ref<LocationFormParams>(_.cloneDeep(defaultForm))
const code = computed(() => {
  const { row_num, column_num, floor_num } = unref(form)
  const { warehouse_code } = unref(currentWarehouse)
  const codeStr = [warehouse_code, row_num, column_num, floor_num]
  return codeStr.filter((item) => item).join('-')
})

const formRef = ref()
function submit() {
  form.value.warehouse_id = unref(currentWarehouse).warehouse_id
  form.value.code = `${unref(form).row_num}-${unref(form).column_num}${unref(form).floor_num ? `-${unref(form).floor_num}` : ''}`
  formRef.value.validate().then(async () => {
    const fetchName = unref(form).id ? 'update' : 'create'
    try {
      loading.value = true
      const res = await locationApi[fetchName](unref(form))
      message.success(res.msg)
      eventEmitter.emit(customEventName.QueryLocationList, currentWarehouse.value)
      open.value = false
    } catch (error) {
      message.error(error.msg)
    } finally {
      loading.value = false
    }
  })
}

function cancel() {
  formRef.value.resetFields()
}
</script>
